<!-- Page 配置表单页面 -->
<template>
  <div>
    <el-row :gutter="24">
      <!-- 左侧按钮 -->
      <el-col :span="5">
        <div style="font-size: 20px;padding: 0px 0 20px 20px;">通用字段</div>
        <draggable class="btnGroup" :list="menus" v-bind="dragOption" :clone="cloneElement">
          <el-button class="btnItem" size="mini" v-for="item in menus" :key="item.type">
            <i :class="item.icon"></i>
            {{item.name}}
          </el-button>
        </draggable>
      </el-col>

      <!-- 中间表单 -->
      <el-col :span="12"
        style="border-right: 1px solid #EBEEF5;border-left: 1px solid #EBEEF5;min-height: 90vh;margin: 0 20px;overflow: auto;">
        <el-form ref="form" label-width="100px" style="min-height: 90vh;position: relative;">
          <draggable v-model="configList" v-bind="dragOption1" @change="onChanged" style="height: 100%;position: absolute;width: 100%;">
            <component-box  v-for="(item) in configList" :comp="item" :key="item.id"/>
            <div 
              v-if="!configList || configList.length === 0"
              style="text-align: center;font-size: 13px;color: #ccc;min-height: 90vh;line-height: 90vh;">
              暂无内容
            </div>
          </draggable>
        </el-form>
      </el-col>

      <!-- 表单内容修改区域 -->
      <el-col :span="6" style="min-height: 90vh;position: relative;">
        <div class="rightArea" v-if="currConfig">
          <div class="rightTop">
            <i class="el-icon-edit"></i>
            <div class="editTxt">编辑字段</div>
          </div>
          <field-type :config="currConfig"/>
          <config-box :currCfg="currConfig"/>
        </div>
      </el-col>
    </el-row>

    <div class="saveBtn">
      <el-button size="small" type="primary" style="width: 100%" @click="saveForm">保存表单</el-button>
    </div>
  </div>

</template>

<script>
  import draggable from 'vuedraggable'
  import {
    fieldList
  } from "@/fields/menu";
  import {IdCreator} from "@/utils/idCreator";
  import ComponentBox from "@/views/fields/common/ComponentBox";
  import ConfigBox from "@/views/fields/common/ConfigBox";
  import FieldType from "@/views/fields/config/common/fieldType";

  export default {
    components: {
      FieldType,
      ConfigBox,
      ComponentBox,
      draggable
    },
    provide() {
      return {
        state :this.state
      }
    },
    props:["actInfo"],
    data() {
      return {
        // 拖拽插件 (data配置)
        configList: [],
        dragOption: {
          group: {
            name: "comp-item",
            pull: "clone",
            put: false,
          },
          sort: false,
          ghostClass: "ghost",
          filter: ".ignore-elements",
        },
        dragOption1: {
          group: {
            name: "comp-item",
            // pull: true,
            // put: true,
          },
          sort: true,
          ghostClass: "ghost",
          animation:300,
        },
        menus: fieldList,
        currConfig: null,

      }
    },
    created() {
      if(sessionStorage.getItem('configList')){
        this.configList = JSON.parse(sessionStorage.getItem('configList'))
      }
    },
    computed: {
      state() {
        return {
          currConfig:()=>this.currConfig,
          setCurrComp: (config) => {
            this.currConfig = config;
          },
          delComp: this.delComp,
          cloneComp: this.cloneComp
        }
      },
    },
    methods: {
      saveForm(){ //保存表单
      // {id:this.actInfo.id,formConfig:JSON.stringify(this.configList)}
        console.log('configList',this.configList)
        sessionStorage.setItem('configList', JSON.stringify(this.configList))
      },

      // 拖拽插件 （方法）
      cloneElement(item) {
        console.log('创建前',item)
        console.log('创建',item.create())
        return item.create();
      },

      onChanged(evt) {
        const event = evt.added || evt.moved;
        if (event) {
          console.log('event',event)
          this.currConfig = event.element;
        }
      },

      delComp(id){
        console.log(id);
        const index = this.configList.findIndex(config=>config.id === id);
        if(index >=0){
          this.configList.splice(index,1);
          this.currConfig = null;
        }
      },

      cloneComp(id){
        let cloneObj
        this.configList.map(item => {
          if(item.id == id){
            cloneObj =JSON.parse(JSON.stringify(item))
          }
        })
        console.log('clone', cloneObj)
        cloneObj.id = IdCreator.randomId()
        this.configList.push(cloneObj)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btnGroup {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .btnItem {
      width: 45%;
      text-align: center;
      margin: 0;
      padding: 10px 0;
      margin-bottom: 15px;
      // padding: 5px 8px;
      // border-radius: 8px;
    }
  }

  .rightArea {
    width: 92%;
    position: absolute;
    top: 0;
    height: 100%;
    overflow: auto;
  }

  .rightTop {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;

    .el-icon-edit {
      font-size: 20px;
      margin-right: 10px;
    }

    .editTxt {
      font-size: 20px;
    }
  }

  .saveBtn {
    width: 50%;
    margin: 0 auto;
    padding-top: 20px;
  }

  .formItemBackground {
    background-color: #eee;
  }
</style>
